<template>
    <div class="ca-login-content">
        <div class="ca-login__margin-auto">
            <div class="ca-login__logo"><img src="~__assets/images/ca_logo.png" alt=""/></div>
            <div class="ca-login__panel">
                <h3 class="ca-align-center ca-f-s-30">锴思投资管理系统</h3>
                <el-form ref="form" :rules="rules" :model="form" >
                    <el-form-item prop="loginName" class="ca-m-t-25 ca-login-form-item">
                        <div class="el-input-group__prepend">
                            <span class="ca-login__button">
                                <i class="fa fa-user"></i>
                            </span>
                        </div>
                        <el-input placeholder="请输入邮箱/用户名" v-model="form.loginName">
                            <span slot="prepend" class="ca-login__button" style="display:none;"><i class="fa fa-user"></i></span>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" class="ca-m-t-25 ca-login-form-item">
                        <div class="el-input-group__prepend">
                            <span class="ca-login__button">
                                <i class="fa fa-key"></i>
                            </span>
                        </div>
                        <el-input type="password" placeholder="请输入密码" v-model="form.password">
                            <span slot="prepend" class="ca-login__button" style="display:none;"><i class="fa fa-key"></i></span>
                        </el-input>
                    </el-form-item>
                    <div class="m_t_25 ca-login--submit">
                        <el-button type="primary" class="sign_i_01" :loading="loginLoading" @click="onSubmit()" @keyup.enter="onSubmit('form')">登&nbsp;&nbsp;录</el-button>
                    </div>
                    <div class="ca-m-t-25">
                        <el-button @click="dialogVisible=true" type="text" class="ca-checkbox-text" style="display: inline-block">锴思投资管理系统（CapSys）试用许可协议</el-button>
                        <el-checkbox class="ca-login-check" v-model="checked" style="display: inline-block;margin-left: 15px;">同意</el-checkbox>
                    </div>
                </el-form>
                <div align="center" style="margin-top: 20px">
                    <img src="~__assets/images/zh-capsys-logo1.png" alt="" >
                </div>
            </div>
            <div class="ca-login__footer">© 2016 chinaventure Co., Ltd. All Rights Reserved.</div>
        </div>

        <el-dialog class="ca-login-dialog" title="锴思投资管理系统（CapSys）试用许可协议" :visible.sync="dialogVisible" style="display: none">
            <div class="ca-login-dialog__content">
                <p>欢迎试用锴思投资管理系统（CapSys）。</p>
                <p>为了让您更好地试用锴思投资管理系统（CapSys）（以下简称“本系统”），请您首先确认本人已满十八周岁，且系完全民事行为能力人，并仔细阅读、充分理解《锴思投资管理系统（CapSys）试用许可协议》（以下简称“本协议”）各条款的内容，特别是免除或限制本系统的开发者，即上海投中信息咨询股份有限公司（以下简称“本公司”）责任的条款，并选择接受或不接受。</p>
                <p>除非您已阅读并接受本协议所有条款，否则您无权试用本系统及相关服务。当您已阅读并点击本页面下方的“同意”键时，即表示您已同意受本协议的约束，并承诺认真遵守本协议的各条款</p>
                <p>一、 协议范围</p>
                <p>1.1本协议是您与本公司之间关于您在本系统试用期内使用本系统以及本系统相关服务所订立的协议。</p>
                <p>1.2 本系统目前为开放免费试用阶段。</p>
                <p>1.3本协议项下的服务是指本系统向用户提供的包括但不限于基金管理、项目管理、客户管理、仪表盘、智能预警、情报收集、灵活模板等服务。具体关于本系统的产品介绍和功能说明，请您详细查阅产品说明书。</p>
                <p>二、 申请试用</p>
                <p>2.1 本系统试用许可仅面向特定的一级市场投资机构相关人员提供。您需要将个人真实身份信息等资料提交至本公司，申请试用本系统及其相关服务。</p>
                <p>2.2在您申请试用并获得本公司认证通过后，本公司将通过电子邮件的方式，向您预留的认证邮箱发送一个登录本系统的初始密码，您将可通过访问http://saas.capsys.cn/，输入您的本系统试用账号（即您的认证邮箱）和密码，试用本系统及其相关服务。</p>
                <p>三、使用规范</p>
                <p>3.1在申请试用本系统时，您必须保证向本公司提供的个人相关资料的真实性、准确性和完整性，如果您提供的信息不真实、不准确或不完整，或本公司有合理的理由怀疑其真实性、准确性或完整性，则本公司有权中止或终止您的试用资格并拒绝您使用本系统及任何现有的或以后可能提供的服务。</p>
                <p>3.2本系统试用帐号的使用权仅归属于您本人，请您不要以包括但不限于赠与、借用、租用、转让或售卖等方式，许可第三人使用该账号。</p>
                <p>3.3作为试用账号的申请人，您有责任妥善保管试用账号信息及密码的安全，您需要对该帐户以及密码下的一切行为承担法律责任。您承诺在任何情况下不向他人透露该帐户及密码相关信息。如该账号或密码遭到未获授权的使用，或者发生其他任何安全问题时，您应立即通知本公司。</p>
                <p>3.4本公司有权在通过本系统提供服务的过程中以各种方式投放各种商业性广告或其他任何类型的商业信息，并且您同意接受本公司通过电子邮件或其他方式向您发送商品促销或其他相关商业信息。</p>
                <p>四、禁止行为</p>
                <p>4.1 禁止通过使用本系统及其相关服务，实施违反中华人民共和国法律、行政法规、地方性法规、规章及其他规范性文件规定的行为。</p>
                <p>4.2禁止通过使用本系统及其相关服务上传、展示或传播任何虚假的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、庸俗淫秽的或其他任何违反国家禁止性规定的信息资料。</p>
                <p>4.3禁止通过使用本系统及其相关服务发送和储存带有计算机病毒或其他有害代码、文件、脚本和程序的文件，或实施任何可能对互联网或移动网正常运转造成不利影响的行为。</p>
                <p>4.4禁止通过使用本系统及其相关服务侵犯其他任何第三方的任何合法权益。</p>
                <p>4.5禁止对本系统或者本系统运行过程中释放到任何计算机终端内存中的数据及本系统运行过程中客户端与服务器端的交互数据进行复制、更改、修改、挂接运行或创作任何衍生作品，形式包括但不限于使用插件、外挂或非经授权的第三方工具/服务接入本系统和相关系统。</p>
                <p>4.6 禁止向任何第三方通过书面、口头、录音、录像、截图等方式泄露包括但不限于系统功能、架构等与本系统及其服务相关的信息。</p>
                <p>五、后台管理</p>
                <p>5.1 本公司有权在其服务器上复制并保存您的个人信息，并承诺仅在为维护您的利益时与您联络。</p>
                <p>5.2 本公司有权随时删除含有任何违反法律、本协议及本公司其他各项规则的信息或链接。本公司有权单独对您提供的信息是否属于上述范围做出判断。</p>
                <p>5.3 本公司有权对您使用本系统及其相关服务的行为进行监督，并保留在任何时候、无需事前通知即可凭借任何理由终止您使用本系统及其相关服务的权利。</p>
                <p>5.4 为了改善用户体验、完善服务内容，本公司有权不经向您特别通知而对本系统进行更新，或者对本系统的部分功能进行调整或限制。</p>
                <p>5.5本公司承诺将在后台建立合理的安全体系，以保护您提供的个人信息或投资数据的完整性和私密性。您也需要了解并同意，由于技术手段不断更新，本公司无法杜绝全部的不安全因素，但会及时更新安全体系，妥善维护网络及相关信息数据的安全。</p>
                <p>六、知识产权</p>
                <p>6.1本系统由本公司自主开发完成。本系统及与本系统相关的著作权、商标权、专利权、商业秘密及受中华人民共和国法律法规和相应的国际条约保护的一切知识产权，以及与本系统相关的所有信息内容的所有权（包括但不限于文字、图片、音频、视频、图表、界面设计、版面框架、有关数据或电子文档等）均归属于本公司，但相关权利人依照法律规定或与本公司签订的合同约定享有的权利除外。</p>
                <p>6.2未经本公司书面同意，您不得为任何商业或非商业目的自行实施、利用、转让或许可任何三方实施、利用、转让上述知识产权，本公司保留追究上述任何侵犯知识产权行为的权利。</p>
                <p>七、免责声明</p>
                <p>7.1因本系统为公共系统，请您不要以自身内部真实数据进行相关操作。若因使用真实数据造成您自身或第三方损失的，本公司对此不承担任何责任。</p>
                <p>7.2本公司不对由于电讯系统或互联网的中断或无法运作、技术故障、计算机错误或病毒、信息损坏或丢失或其它在本公司合理控制范围之外的原因而产生的服务中断或其他任何性质的破坏而向您或任何第三方承担损害赔偿责任。</p>
                <p>7.3本公司不对您基于使用本系统及其相关服务而做出的任何商业决策的后果承担任何责任。</p>
                <p>7.4本公司会对项目数据、市场信息等基础数据进行动态更新，但对本系统提供服务的及时性不作任何法律或商业上的担保。</p>
                <p>7.5本公司致力于全方位满足用户对项目投资管理的需求，但对本系统提供的服务能够完全满足您的使用要求不作任何法律或商业上的担保。</p>
                <p>八、违约责任</p>
                <p>8.1如因您违反法律或本协议项下的任何条款而给本公司造成损失的，本公司有权按照中华人民共和国法律的规定，追究您的违约责任，并要求您承担因违约行为给本公司造成的全部损失。若您的行为侵犯了包括但不限于知识产权在内的本公司依法享有的权益，本公司有权要求您承担进一步的损害赔偿责任。</p>
                <p>8.2本公司有权在您违反法律或本协议项下的任何条款的情况下，不经事前通知，终止您对本系统试用账号的使用权，并且您有义务继续遵守本协议的规定。</p>
                <p>九、争议解决</p>
                <p>9.1本协议适用中华人民共和国法律。如遇本协议有关的某一特定事项缺乏明确法律规定，则应参照通用国际商业惯例和（或）行业惯例。</p>
                <p>9.2 因双方就本协议的签订、履行或解释发生争议，双方应努力友好协商解决。如协商不成，任何一方均有权向本公司所在地人民法院起诉。</p>
                <p>十、不得转让</p>
                <p>除非取得本公司事先书面同意，您不得将您在本协议项下的权利与义务转让给任何第三方。</p>
                <p>十一、协议修改</p>
                <p>11.1本公司有权随时修改本协议的任何条款，一旦本协议的内容发生变动，本公司将会直接在本系统登录网站上公布修改之后的协议内容，该公布行为视为本公司已经通知您有关本协议的修改内容。</p>
                <p>11.2如果您不同意本公司对本协议相关条款所做的修改，应当立即停止使用本系统及其相关服务。如果您继续使用本系统及其相关服务，则视为您已接受本公司对本协议相关条款所做的修改。</p>
                <p>十二、其他规定</p>
                <p>12.1本协议所有条款标题仅为阅读方便，本身并无实际涵义，不能作为解释本协议的依据。</p>
                <p>12.2本协议的任何条款无论因何种原因完全或部分无效或不可执行，其余条款仍有效，对双方具有约束力。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">
    import { mapActions } from 'vuex';
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        name: 'Login',
        data() {
            return {
                loginLoading: false,
                form: {
                    loginName: '',
                    password: '',
                },
                rules: {
                    loginName: [
                        {required: true, message: '用户名或者邮箱名不能为空', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                },
                checked: false,         // 是否同意协议
                disabled: true,         // 按钮是否可点击
                dialogVisible: false,
            };
        },
        mounted() {
            document.onkeydown = event=>{
                var e = event || window.event;
                // enter 键
                if (e && e.keyCode === 13) {
                    this.onSubmit();
                }
            };
        },
        destroyed() {
            document.onkeydown = null;
        },
        methods: {
            ...mapActions(['signIn']),
            //登陆
            onSubmit() {
                if (!this.checked) {
                    this.$message.warning('请阅读并同意《锴思投资管理系统（CapSys）试用许可协议》');
                    return;
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loginLoading = true;
                        apiHttp(api.API_LOGIN,this.form).then(ret=> {
                                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                        this.getRegionData()
                                        this.signIn(ret.data).then(() => {
                                            // 判断是否有首页权限
                                            if (isNoAuth('我的首页-查看') === true) {
                                                this.$router.push({name: 'home-page'})
                                            } else {
                                                this.$router.push({name: 'welcome'})
                                            }
                                             // 请求菜单小圆点和基金、项目数字数量
                                             this.$store.dispatch('getMsg');
                                        });
                                    } else {
                                        this.loginLoading = false;
                                    }
                                }
                        );
                    } else {
                        return false;
                    }
                });
            },
            async getRegionData() {
                let resData = await apiHttp(api.GET_REGION);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    localStorage.setItem('region', JSON.stringify(resData.data));
                }
            }
        },
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .ca-login-content {
        position: absolute;
        height: 100%;
        width: 100%;
        background: #f0f0f0 url(~__assets/images/login-bg.jpg) center no-repeat ;
    }

    .ca-login__margin-auto {
        width: 470px;
        margin: 0 auto;
    }

    .ca-login__logo {
        text-align: center;
        margin: 60px 0 0 0;
    }

    .ca-f-s-30 {
        font-size: 26px !important;
        color: #fff;
        font-weight: normal;
    }

    .ca-login__panel {
        background: #e75a62;
        padding: 40px 80px 40px 80px;
        margin-top: 30px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
    }

    .ca-login__footer {
        color: #404040;
        text-align: center;
        margin-top: 30px;
    }

    .ca-checkbox-text {
        color: #fff;
    }

    .ca-login-dialog__content p {
        line-height: 26px;
    }
    .ca-login__button {
        width: 40px;
        font-size: 16px !important;
        padding: 0;
        span {
            font-size: inherit;
        }
    }

    .ca-login--submit button {
        width: 100%;
        background: #fff;
        border: #fff;
        color: #7d7d7d;
        height: 40px;
        font-size: 16px;
        span {
            font-size: inherit;
        }
    }

    .ca-login-dialog {
        .el-dialog__header {
            text-align: center;
        }
        .el-dialog__footer {
            text-align: center;
        }
    }
    .ca-login-check .el-checkbox__label {
        color: #000;
        font-size: 12px;

    }
</style>
